<script setup>
import ItemPage from '@/components/ItemPage.vue'
import { ref } from 'vue'
import { inject } from 'vue'
const refItemPage = ref(null)
// 获取数据
const axios = inject('axios')
const dataList = ref([])
async function fetchData() {
  const res = await axios.get('/api/chartThree/data')
  console.log(res.data.data)
  dataList.value = res.data.data.chartData
}
// 渲染
const echarts = inject('echarts')
let myChart
fetchData().then(() => {
  myChart = echarts.init(refItemPage.value.$el)
  const option = {
    title: {
      text: '产品月销',
      textStyle: {
        color: '#fff',
        fontSize: 20
      }
    },
    tooltip: {},
    legend: {
      width: 400,
      itemWidth: 18,
      itemHeight: 12,
      bottom: '3%'
    },
    series: {
      type: 'pie',
      data: dataList.value,
      radius: [20, 80],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 5
      }
    }
  }
  myChart.setOption(option)
})
window.addEventListener('resize', () => {
  myChart.resize()
})
</script>
<template>
  <ItemPage ref="refItemPage"></ItemPage>
</template>
<style lang="scss" scoped></style>
